<!--数据维护项页面头,蓝色主题-->
<template>
  <div id="main-top-panel">
    <div class="div-left">
      <div class="dl-icon" :style = "{width:'64px'}">
        <img ref="logoImg"  height="48" width="48"/>
      </div>

      <div class="dl-con">
        <div class="dl-title">
            {{app.title}}
        </div>
      </div>
    </div>
    <div class="div-right">
      <div class="dr-user">
<!--        <user :login-name="loginName" />-->

<!--        <language v-if="$config.useI18n" v-show="1===0" @on-lang-change="setLocal" style="margin-right: 20px;" :lang="local" />-->

        <user :userAvatar="userAvatar"
              :login-name="loginName"
              :organizations="organizations"
              :userName="userName"
              :fullName="fullName"
        />

      </div>
      <div class="dr-message">
<!--  props={{transfer:true}      -->
        <Poptip word-wrap trigger="click" placement="bottom" width="400">
          <Tooltip  :content="h5.messageCenter">
            <Badge :dot="userMessageCount>0">
    <!--    @click="showAlarmData"       -->
              <Icon type="ios-mail-open-outline" size="48" color="#14edc5" :style="{cursor:'pointer'}" ></Icon>
            </Badge>
          </Tooltip>
          <div class="api" slot="content">
            <MessageForm :alarmData="alarmData"></MessageForm>
          </div>
        </Poptip>
      </div>
      <!-- 菜单按钮      -->
      <div class="dr-buttons">
        <ButtonGroup ref="buttonGroup"/>
      </div>
      <!--报警声音 -->
      <audio  v-show="1===0" src="sound/alarm07.wav" id="alarmPlay"  ref="alarmPlay"  controls />
    </div>

    <!-- 报警信息   -->
    <Modal v-model="show"  :loading="loading" :title="h5.title"
           :mask-closable="true" :footer-hide=false width="700px" :closable="true"
           :styles="{right:'0px'}">
      <Table border :row-class-name="rowClassName" :columns="h5.columns" :data="tableData" :styles="{height:'800px'}">
      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
    </Modal>
  </div>
</template>
<script>
import user from '@/components/main/components/user';
import Language from '@/components/main/components/language'
import ButtonGroup from './HeadMenu/ButtonGroup';
import MessageForm from './HeadMenu/MesssageForm';
import TopnavPage from "_c/topnav/TopnavPage";
import {apiResult, getLoginUser, getToken,localRead} from '@/libs/util';
import DeviceAlarm from "@/api/DeviceAlarm";
import { currentUser,enabledNotify } from '@/api/user';
import appLogo from "@/assets/images/logo-mc.png"
import {mapMutations} from "vuex";
export default {
  name: "HeadMenu",
  components:{user,ButtonGroup,TopnavPage,MessageForm,Language},
  props:{
    activePage:{
      type: Number,
      default: 0
    }
  },
  watch:{
    activePage(newVal,oldVal){
      //this.$Message.error("activePage原值=" + oldVal + ";新值="+newVal);
      //console.log(">>>>>>> HeadMenu.activePage oldVal:%o,newVal:%o",oldVal,newVal)
      this.$refs.buttonGroup.changeCurrent(newVal);
    },

    sysConfig:{
      handler(n,o) {
        //console.log("headMenu.sysConfig:   o=%o; n=%o",o,n)
        if (!!n){
          this.changeTitle(n);
        }
      }
    },
    userMessageCount(newVal,oldVal){
      if (newVal > oldVal){
        console.log("headMenu.watch.userMessageCount:   o=%o; n=%o",oldVal,newVal)
        //播放声音
        this.$refs.alarmPlay.play();
      }

    }
  },
  computed:{
/*    local () {
      return this.$store.state.app.local
    },*/
    loginName(){
      /**
       *  computed 就不需要在 data 声明loginName了
       * 取 /store/moudle/login.js 里 getLoginName, 后不用带()*/
      //return this.$store.getters.getLoginName;
      const userInfo = getLoginUser();//this.$store.getters.getUserInfo;
      return (!!userInfo)?userInfo.loginName:"";//  this.$store.getters.getFullName;
    },
    userName(){
      /**
       *  computed 就不需要在 data userName
       * 取 /store/moudle/login.js 里 getUserName, 后不用带()*/
      const userInfo = getLoginUser();//this.$store.getters.getUserInfo;
      return (!!userInfo)?userInfo.userName:"";
      //return this.$store.getters.getUserName;
    },
    fullName(){
      /**
       *  computed 就不需要在 data fullName
       * 取 /store/moudle/login.js 里 getFullName, 后不用带()*/
      const userInfo = getLoginUser();//this.$store.getters.getUserInfo;
      return (!!userInfo)?userInfo.fullName:"";
      //return this.$store.getters.getFullName
    },
    organizations(){
      /**
       *  computed 就不需要在 data organizations
       * 取 /store/moudle/login.js 里 getOrganizations, 后不用带()*/
      const userInfo = getLoginUser();//this.$store.getters.getUserInfo;
      return (!!userInfo)?userInfo.organizations:[];
      //return this.$store.getters.getOrganizations;
    },
    userMessageCount(){
      return this.$store.getters.userMessageCount;
    },
    sysConfig(){
      const sc = this.$store.getters.sysConfig
      if (!!sc){
        this.changeTitle(sc);
/*
        if (!!this.$store.getters.sysConfig.CUSTOMER_LOGO){
          this.app.logo = this.$store.getters.sysConfig.CUSTOMER_LOGO;
        }
        if (!!this.$store.getters.sysConfig.CUSTOMER_TITLE){
          this.app.title = this.$store.getters.sysConfig.CUSTOMER_TITLE
        }
*/
      }
      return sc;
    },
    h5(){
      return{
        messageCenter:this.$t('alram_message_center'),
        title:this.$t('alarm_process'),
        columns: [
          {title: this.$t('alarm_processed'), key: 'dispose', sortable: true,width: 100,align: 'center'},
          {title: this.$t('alarm_time'), key: 'alarmTime', sortable: true,width: 170,align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('alarm_by_people'), key: 'userName', sortable: true, ellipsis:true,width: 175},
          {title: this.$t('alarm_device_code'), key: 'deviceCode', sortable: true,width: 200,align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('alarm_type'), key: 'alarmCate', sortable: true, width: 80},
          {title: this.$t('alarm_remark'), key: 'alarmDescription', sortable: true, width: 80},
          {title: this.$t('alarm_device_name'), key: 'deviceName', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('alarm_orgination'), key: 'shortName', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('alarm_longitude'), key: 'longitude', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
          {title: this.$t('alarm_latitude'), key: 'latitude', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
        ],
      }
    }
  },

  data(){
    return{
      api: new DeviceAlarm(),
      show:false,
      loading:false,
      userAvatar:"",
      dot:false,
      app:{
        logo:appLogo,
        title:null,
      },

      queryParam: {
        page: {
          pages: 1,
          size: 10,
          total: 0,
          current: 1,
        },
        where: {
          keyword: null,
          deviceId: null,
          fromTime: null,
          toTime: null,
          userId: null,
          orgId: null,
          deviceCode: null,
          isGroupBy: false
        },
      },
      tableData: [],
      userData: {
        enabledNotify:true
      },
      alarmData:[],//{id,desc,object,message}
    }
  },
  methods:{
    ...mapMutations([
      'setLocal'
    ]),
    rowClassName (row, index) {
      if (index === 1) {
        return 'demo-table-info-row';
      } else if (index === 3) {
        return 'demo-table-error-row';
      }
      return '';
    },

    showAlarmData(){
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      start.setHours(0);
      start.setMinutes(0);
      start.setSeconds(0);
      start.setMilliseconds(0);
      end.setHours(23);
      end.setMinutes(59);
      end.setSeconds(59);
      end.setMilliseconds(999);
      this.dateRange = [start, end];
      this.show=true;
      this.getData();

    },
    changePage() {
      this.getData()
    },
    getData() {
      this.tableLoading = true;
      /** 生成查询条件 */

      if (!(this.dateRange == null || this.dateRange.length < 2 || this.dateRange[0] == "")) {
        this.queryParam.where.fromTime = this.dateRange[0];
        this.queryParam.where.toTime = this.dateRange[1];
      }
      this.api.queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = [];
          apiResult(res.data,false,result=>{
            this.queryParam.page.total = result.data.total;
            this.tableData = result.data.records;
          })
        this.tableLoading = false;
      })
    },
    changeTitle(sc){
      if (!!sc.CUSTOMER_LOGO){
        this.app.logo = sc.CUSTOMER_LOGO;
      }
      //console.log("HeadMenu.changeTitle locale=%o,sysConfig=%o",locale,sc)
      const locale = this.$store.state.app.local;
      if (locale === 'en-US' && !!sc.CUSTOMER_TITLE_ES){
        this.app.title = sc.CUSTOMER_TITLE_ES;
      }else if (!!sc.CUSTOMER_TITLE){
        this.app.title = sc.CUSTOMER_TITLE;
      }
    }
  },
  mounted() {
    //console.log("mounted")
    this.$nextTick(()=>{
      if (!!this.$store.state.app.sysConfig.CUSTOMER_LOGO) {
          this.$refs.logoImg.src = this.$store.state.app.sysConfig.CUSTOMER_LOGO;
      }
    })
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
  }
}
</script>

<style lang="less">
#main-top-panel{
  width: 100%;
  height: 64px;
  background: url("./HeadMenu/img/bg-1.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  flex-shrink:0;

  .div-left{
    width: 538px;
    //border: 1px solid #14edc5;
    background: url("./HeadMenu/img/bg-5.png") no-repeat;
    display: flex;
    //不缩放
    //flex-shrink:0;
    .dl-icon{
      width:64px;
      //border: 1px solid #14edc5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .dl-con{
      width:474px;
      //border: 1px solid #b014ed;
      display: flex;
      justify-content: left;
      align-items: center;

      .dl-title{
        margin-left: 30px;
        width:430px;
        height: 48px;
        //border: 1px solid #ffffff;
        display: flex;
        justify-content: left;
        align-items: center;
        color: #eaeef5;
        font-size: 26px;
        font-width: true;
      }
    }
  }

  .div-right{
    //margin-left: 624px;
    width: 100%;
    //border: 1px solid #84e8d7;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    .dr-message{
      width: 100%;
      height: 100%;
      margin-top: 10px;
      //border: 1px solid #14edc5;
      display: flex;
      justify-content: center;
    }
    .dr-buttons{
      margin-left: 10%;
      width: 100%;
      height: 100%;
      display: flex;
      //flex-direction: row;
      align-items: center;
      //border: 1px solid #e30c0c;
    }

    .dr-user{
      margin-top: 15px;
      width: 100px;
      //border: 1px solid #e30c0c;
      cursor: pointer;
      display: flex;
      //justify-content: left;
      align-items: center; //水平居中
      //不缩放
      flex-shrink:0;
    }
  }
  .ivu-table .demo-table-info-row td{
    background-color: #2db7f5;
    color: #fff;
  }
  .ivu-table .demo-table-error-row td{
    background-color: #ff6600;
    color: #fff;
  }
}


</style>
